<template>
  <div class="container1">
    <h1>
      作者：周杰伦 <a href="javascript:;" @click="btn">{{ loading ? '加载中...' : '关注' }}</a>
    </h1>
    <hr />
    <Son />
  </div>
</template>

<script>
/* 
  目标：回顾mixins语法的基本使用，掌握 Vue3 组合式API封装逻辑

  vue2 封装逻辑 
    选项式API - mixins

  vue3 封装逻辑 
    组合式API - 就是函数封装而已
*/
import { useLoading } from './loading.js'
import Son from './Son.vue'
export default {
  name: 'App',
  components: { Son },
  setup() {
    // 调用函数，接收返回值，解构返回值给模板使用
    // const res = useLoading()
    // console.log(res)
    // return { ...res }
    
    // 一步到位写法
    return { ...useLoading() }
  },
}
</script>
